<template>
  <div class="app">
    <!-- 面包屑导航区域 开始 -->
    <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>书籍分类管理</el-breadcrumb-item>
      <el-breadcrumb-item>登记书籍分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 面包屑导航区域 开始 -->
    <div>
      <el-card class="box-card">
        <!-- 头部查询按钮 与 搜索框 开始 -->
        <div>
          <el-input
            class="searchBook"
            placeholder="请输入书籍分类名称"
            style="width: 300px"
            v-model="queryCriteria.search"
            clearable
          >
          </el-input
          ><el-button
            icon="el-icon-search"
            class="searchBookButton my-el-button"
            type="primary"
            @click="queryBookButton"
            >查询</el-button
          >
          <el-button type="success" class="el-icon-plus addButton" @click="handleAdd()"
            >添加书籍分类</el-button
          >
        </div>
        <!-- 头部查询按钮 与 搜索框 结束 -->
        <!-- 分类数据 展示开始 -->
        <el-table v-loading="loading" :data="tableData" style="width: 100%">
          <el-table-column fixed type="index" width="50"> </el-table-column>
          <el-table-column label="书籍分类名称" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row.classificationName
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="分类下所属书籍数量" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row.bookList.length
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                class="my-el-button-default"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分类数据 展示结束 -->
        <!-- 分页 开始-->
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryCriteria.page"
            :page-sizes="[5, 10, 15, 30]"
            :page-size="queryCriteria.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <!-- 分页 结束-->
      </el-card>
    </div>
    <!-- 修改窗口 -->
    <el-dialog
      :title="status == 1 ? '添加分类' : status == 2 ? '修改分类' : '删除分类'"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="updateFrom">
        <el-form-item label="分类名称" label-width="120px">
          <el-input
            v-model="updateFrom.classificationName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmModifyButton">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  queryClassificationPage,
  queryClassificationTotal,
  modifyClassificationById,
  addClassification,
  queryClassification
} from '@/network/classificationManager'
export default {
  data() {
    return {
      tableData: [],
      total: 0, // 总数
      loading: true, // 加载动画
      dialogFormVisible: false, // 修改弹出层
      // 查询条件
      queryCriteria: {
        page: 1,
        size: 5,
        search: '',
        status: 1 // 正常状态
      },
      status: 1, // 1：增加  2修改  3删除
      updateFrom: {
        // 修改 条件
        classificationName: '',
        _id: '',
        classificationStatus: 1
      }
    }
  },
  methods: {
    // size数据改变
    handleSizeChange(val) {
      this.queryCriteria.size = val
    },
    // 翻页
    handleCurrentChange(val) {
      this.queryCriteria.page = val
    },
    // 修改按钮
    handleEdit(index, row) {
      this.status = 2
      this.dialogFormVisible = true
      this.updateFrom = JSON.parse(JSON.stringify(row))
      delete this.updateFrom.bookList
      console.info(this.updateFrom)
      console.log(index, row)
    },
    // 删除按钮
    handleDelete(index, row) {
      if (row.bookList.length > 0)
        return this.$message.warning('当前分类下含有书籍，暂不能删除')
      this.status = 3
      this.updateFrom = JSON.parse(JSON.stringify(row))
      delete this.updateFrom.bookList
      this.updateFrom.classificationStatus = 0
      this.$confirm(`此操作将删除该数据, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          modifyClassificationById(this.updateFrom)
          this.$message.success(`删除成功`)
          this.queryClassificationPag()
        })
        .catch(() => {
          this.$message.info(`已取消删除`)
        })
      console.log(index, row)
    },
    // 添加按钮
    handleAdd() {
      this.status = 1
      this.dialogFormVisible = true
    },
    // 查询按钮
    queryBookButton() {
      this.queryClassificationPag()
    },
    // 确认修改按钮
    async confirmModifyButton() {
      // 等于1 增加操作
      if (this.status == 1) {
        if (!this.updateFrom.classificationName)
          return this.$message.warning(`请填写书籍分类名称`)
        let res = await queryClassification(this.updateFrom.classificationName)
        if (res.data.length > 0) return this.$message.warning('当前分类已存在')
        addClassification(this.updateFrom)
        this.queryClassificationPag()
        this.$message.success('添加成功')
        this.dialogFormVisible = false
        return
      }
      if (!this.updateFrom.classificationName)
        return this.$message.warning('输入不能为空')
      this.$confirm(`此操作将修改该数据, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let res = await queryClassification(
            this.updateFrom.classificationName
          )
          if (res.data.length > 0)
            return this.$message.warning('当前分类已存在')
          modifyClassificationById(this.updateFrom)
          console.info(res)
          this.queryClassificationPag()
          this.$message.success(`修改成功`)
          this.dialogFormVisible = false
        })
        .catch(() => {
          this.$message.info(`已取消修改`)
        })
    },
    // 查询书籍分类信息
    async queryClassificationPag() {
      this.loading = true
      let res = await queryClassificationPage(this.queryCriteria)
      console.info(res);
      let resTotal = await queryClassificationTotal(this.queryCriteria)
      this.tableData = JSON.parse(res.resp_data).res.list
      this.loading = false
      console.info(this.tableData)
      this.total = resTotal.count
      console.info(resTotal)
    }
  },
  // vue 生命周期方法
  async mounted() {
    this.queryClassificationPag()
  },
  // 监听属性
  watch: {
    'queryCriteria.page': {
      // 页码发生变化
      handler: function() {
        this.queryClassificationPag()
      }
    },
    'queryCriteria.size': {
      // 每页多少条发生变化
      handler: function() {
        this.queryClassificationPag()
      }
    },
    dialogFormVisible: {
      handler: function() {
        if (this.dialogFormVisible == false) {
          this.updateFrom.classificationName = ''
          this.updateFrom._id = ''
          this.updateFrom.classificationStatus = 1
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.searchBookButton {
  margin-left: 20px;
}
.addButton {
  float: right;
}
.addButton::after {
  content: '';
  display: inline-block;
  clear: both;
}
</style>
